<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户转移/共享</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		<style type="text/css">
			.input-with-select .el-input-group__prepend {
				background-color: #fff;
			}
			/* .el-cascader{
				width:250px;
			} */
			.el-button{
				font-size: 14px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>批量共享/转移</h3>
			<p>说明：1)选中需要转移的客户 2)点击列表右上方的"批量转移"</p>
			<!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				<el-menu-item index="1">全部客户</el-menu-item>
				<el-menu-item index="2">潜在客户</el-menu-item>
				<el-menu-item index="3">签约客户</el-menu-item>
				<el-menu-item index="4">重复购买</el-menu-item>
				<el-menu-item index="5">失效客户</el-menu-item>
			</el-menu>
			<div class="line"></div> -->
			
				<!-- <div style="margin-top: 15px;">
						<div class="block">
							<el-cascader placeholder="试试搜索：客户" :options="options" filterable change-on-select></el-cascader>							
							<el-input placeholder="请输入内容" style="width:50%" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
							</el-input>
					</div>
			</div> -->
			<br />
			<div>
				<span>客户基本信息（共${page.total}条）</span>
				<el-button slot="warning" type="primary" icon="el-icon-upload" @click="delGroup" :disabled="this.sels.length === 0">批量转移</el-button>
			</div>
			<br />
			
			<!-- 批量转移客户append-to-body class="disbox" -->
			<el-dialog title="批量转移" :visible.sync="dialogFormVisible">
				<template>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
				<el-form-item label="选中目标用户(所有者)" prop="client">
				  <el-radio-group v-model="ruleForm.client" @change="changeRadio">
				  	<el-radio v-for="item in adminRoles" :key="item" :label="item">{{item.name}}</el-radio> 
				  </el-radio-group>
				  </el-form-item>
				  </el-form>
				</template>
				<el-row>
					<el-col :span="12">
						<el-button type="primary" @click="distribution">确认分发<i class="el-icon-upload el-icon--right"></i></el-button>
					</el-col>
				</el-row>
			</el-dialog> 
			<!-- 批量转移客户end -->
			
			<template>
			  <el-table border ref="multipleTable" :data="tableData3" :fit="true" @row-click="handleCurrentChange2" @selection-change="selsChange" tooltip-effect="dark" style="width: 100%">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="ID" label="ID" width="60" align="center"></el-table-column>
				<el-table-column prop="shortname" label="简称" width="80" align="center"></el-table-column>
				<el-table-column prop="name" label="客户名称" align="center"></el-table-column>
				<el-table-column prop="sex" label="性别" align="center"></el-table-column>
				<el-table-column prop="phone" label="电话号码" align="center"></el-table-column>
				<el-table-column prop="superior_client2" label="所有者" align="center"></el-table-column>
				<el-table-column prop="address" label="地址" width="200" align="center"></el-table-column>
				<el-table-column prop="addtime" label="创建日期" width="200" align="center"></el-table-column>
			  </el-table>
			  <div style="margin-top: 20px">
				<el-button @click="toggleSelection()">取消选择</el-button>
			  </div>
			</template>
			
			<!-- 分页 -->
			<div style="display: block; float: left; margin-left: 400px;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
				 :page-sizes="[1, 2, 4, 6]" :page-size="${page.pageSize}"  layout="total,prev, pager, next, jumper" :total="${page.total}">
				</el-pagination>
			</div>
			
		</div>
		
		<script type="text/javascript">
			var orderlist=${list};//全部客户
			var pagejson=${pagejson};//客户分页
			var username=${jsonusername};//用户姓名
			var Main = {
				data() {
					return {
					dialogFormVisible:false,
					activeIndex: '1',
					input5:'',
					options:[],
					sels: [],//选中的值显示
					ruleForm:[],
					rules:'',
					currentPage4: pagejson.pageNum,
					tableData3:orderlist,
					multipleSelection: [],
					custid:[],
					adminRoles:username,
					//单选框的值
					roles:'',
					};
				},
				methods: {
					handleClick(row) {
						console.log(row);
					},
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},
					handleSizeChange(val) {
						showAtRight('/customer/customerTransfer?pageSize='+val);
					
					},
					handleCurrentChange(val) {
						showAtRight('/customer/customerTransfer?pageNum='+val);
					},
					handleSelect(key, keyPath) {
					console.log(key, keyPath);
					if (key == 1) {

					}
					},
					toggleSelection(rows) {
						console.log(rows);
				        if (rows) {
				          rows.forEach(row => {
				            this.$refs.multipleTable.toggleRowSelection(row);
				          });
				        } else {
				          this.$refs.multipleTable.clearSelection();
				        }
				      },
				      handleSelectionChange(val) {
				          this.multipleSelection = val;
				        },
				        
				    //批量转移
				selsChange(sels) {
		            this.sels = sels
		        },
		        delGroup() {
		            var ids = this.sels.map(item => item.ID).join();//获取所有选中行的id组成的字符串，以逗号分隔
					console.log(ids);
		            this.dialogFormVisible=true;
		        },
		        handleCurrentChange2(row, event, column) {
		            this.$refs.table.toggleRowSelection(row);
		        },
		        //获取到单选框的值
		        changeRadio (value) {
		        	this.roles=value.ID;
        			//console.log("***----:"+this.roles);
        	    },

		        //确认分发
		        distribution(){
		        	var _this=this;
		        	var obj = {};
		        	var idss = this.sels.map(item => item.ID).join();
		        	console.log("获取id数据------:"+idss);
		        	//console.log("获取用户数据1111------:"+_this.roles);
		        	axios.post('/customer/updateClient02',
		        		Qs.stringify({'client':_this.roles,'ID[]':idss},{arrayFormat: 'brackets'}) 
					//ajax请求成功的回调函数
					).then(function(v){
						//console.log("所有者："+client);
						console.log("回调成功，获取了服务器端返回的值v");
						console.log(v);
						_this.dialogFormVisible=false;
						_this.restaurants=v.data;
		           		_this.$notify({
		           	          title: '转移成功',
		           	          type: 'success',
		           	       	  duration:2000
		           	        });
						showAtRight('/customer/customerTransfer');
					}).catch(function(){
						//console.log("出错了！");
						//showAtRight('/customer/customerTransfer');
					});
		        },
				}
				}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
		</script>
	</body>
</html>
